<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<f:view xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"        
        xmlns:p="http://primefaces.org/ui"
        xmlns:ui="http://java.sun.com/jsf/facelets">
    <html>
        <h:head>
            <title>SG | Home </title>
            <h:outputStylesheet name="css/jsfcrud.css"/>

            <h:outputStylesheet library="css" name="style.css"/>
            <h:outputStylesheet library="css" name="bootstrap.css"/>
            <h:outputStylesheet  name="http://fonts.googleapis.com/css?family=Montserrat:400,700"/>
            <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
            <h:outputStylesheet library="js" name="jquery.min.js"/>
            <h:outputScript library="js" name="jquery.min.js"/> 
            <h:outputScript library="js" name="easing.js"/> 
            <h:outputStylesheet library="css" name="flexslider.css"/>
            <h:outputStylesheet library="css" name="megamenu.css"/>
            <h:outputStylesheet library="css" name="form.css"/>
            <h:outputStylesheet library="css" name="form.css"/>
            <h:outputScript library="js" name="megamenu.js"/> 


            <script>$(document).ready(function () {
                    $(".megamenu").megamenu();
                });</script>
            <h:outputScript library="js" name="menu_jquery.js"/> 
            <h:outputScript library="js" name="jquery.easydropdown.js"/> 
            <h:outputScript library="js" name="jquery.etalage.min.js"/> 

            <script>
                jQuery(document).ready(function ($) {

                    $('#etalage').etalage({
                        thumb_image_width: 300,
                        thumb_image_height: 400,
                        source_image_width: 800,
                        source_image_height: 1000,
                        show_hint: true,
                        click_callback: function (image_anchor, instance_id) {
                            alert('Callback example:\nYou clicked on an image with the anchor: "' + image_anchor + '"\n(in Etalage instance: "' + instance_id + '")');
                        }
                    });

                });
            </script>
            <link rel="stylesheet" href="resources/css/style1.css" type="text/css"/>
            <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
            <script src="resources/js/jquery.min.js"></script>
            <script src="resources/js/menu_jquery.js"></script>
        </h:head>
        <h:body>
             
            <!-- header <p:growl id="mensaje" showDetail="true" life="2000"/>-->
            <div class="header">
                <div class="top_bg">
                    <div class="container">
                        <div class="header_top">
                            <div class="logo">

                                <a href="index.html"><img src="resources/img/golden.jpg" alt=""/></a>
                            </div>
                            <div class="login" id="loginContainer" style="background-color:#00ACED "><a href="#" id="loginButton"><span>Login</span></a>
                                <div id="loginBox" >                
                                    <h:form id="loginForm" style="background-color:#66B3FF ">
                                        <fieldset id="body">
                                            <fieldset>
                                                <div>
                                                    <p:inputText id="email" 
                                                                 type="text"
                                                                 placeholder="Email"
                                                                 value="#{usuarioController.email}"
                                                                 required="true">
                                                    </p:inputText>
                                                </div>
                                            </fieldset>
                                            <fieldset>
                                                <div>
                                                    <p:inputText id="password" 
                                                                 type="password"
                                                                 placeholder="Contrasena"
                                                                 value="#{usuarioController.contrasena}" 
                                                                 required="true">
                                                    </p:inputText>
                                                </div>
                                            </fieldset>
                                            
                                            <p:inputText id="login"
                                                         type="submit"
                                                         value="Sign in"
                                                         onclick="#{usuarioController.logear()}"
                                                         >
                                                <p:ajax event="blur" 
                                                        update="password, email"/>
                                            </p:inputText>
                                        </fieldset>                                        
                                    </h:form>
                                </div>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="head-bann">
                <div class="container">
                    <div class="head-nav">
                        <span class="menu"> </span>
                        <ul class="megamenu skyblue">
                            <li><a class="color1" href="index.xhtml">Home</a></li>
                            <li><a class="color4" href="empresa.xhtml">Empresa</a></li>				
                            <li><a class="color5" href="informacion.xhtml">Informacion</a></li>
                            <li><a class="color6" href="ubicacion.xhtml">Ubicacion</a></li>
                            <li><a class="color7" href="contactos.xhtml">Contactos</a></li>
                            <div class="clearfix"> </div>
                        </ul> 
                    </div>
                </div>	
            </div>
            <!-- script-for-nav -->
            <script>
                $("span.menu").click(function () {
                    $(".head-nav ul").slideToggle(300, function () {
                        // Animation complete.
                    });
                });
            </script>
            <!-- script-for-nav -->
            <div class="banner">
                <div class="container">
                    <div class="col-md-6">
                    </div>
                    <div class="col-md-6 banner-info">
                        <h1>Golden Bridge</h1>
                        <p style="text-align: justify;">Es una empresa que brinda capacitación y formación en el área de inglés a todo tipo de estudiantes,  la que cuenta con un programa de Ingles presencial dinámico de fácil asimilación, que adapta técnicas de aprendizaje a las necesidades en cuanto a tiempo, espacio, nivel de conocimiento presupuesto y metodología.</p> 
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </h:body>
    </html>
</f:view>
